<template>
  <div class="ticketDetailMain">
      <div class="bigbox">
          <div class="innerbox" v-for="(item,i) of details" :key="i" @click="order(item)">
              <div class="beforetime">
                  <div class="time">{{item.startTime}}</div>
                  <div class="start">{{item.startAirport}}</div>
              </div>
              <div class="timer">{{item.timer}}</div>
              <div class="aftertime">
                  <div class="time">{{item.endTime}}</div>
                  <div class="start">{{item.endAirport}}</div>
              </div>
                <div class="price">{{item.price.slice(0,-1)}}</div>
              <div class="text">{{item.nickname}} | {{item.lable}}</div>

          </div>
      </div>
  </div>
</template>

<script>
export default {
    name:"ticketDetailMain",
    data(){
        return{
            before:"",
            details:[]
        }
    },
    mounted(){
        this.before=this.$route.query.address
        this.$http.post("/trickHomeAirpost",{mid:1,address:this.before}).then(result=>{
            // console.log(result.data.data)
            this.details=result.data.data
        })
    },
    methods:{
        order(item){
            this.$router.push({path:'/ticketorder',query:item});
        }
    }
}
</script>

<style lang="scss" scoped>
.ticketDetailMain{
    width: 100%;
    height: 200px;
    // background-color: aqua;
    .bigbox{
        margin-top: 1vw;
        .innerbox{
            width: 100%;
            height: 25vw;
            background-color: white;
            margin-bottom: 1vw;
            padding-top: 2vw;
            padding-left: 2vw;
            box-sizing: border-box;
            // display: flex;
            // flex-wrap: wrap;
            overflow: hidden;
            .beforetime{
                margin-top: 2vw;
                margin-left: 2vw;
                .time{
                    font-size: 20px;
                    font-weight: 500;
                }
                .start{
                    font-size: 13px;
                    color: #808080;
                }
            }
            .timer{
                font-size: 15px;
                color: #808080;
                height: 7vw;
                width: 23vw;
                border-bottom: 1px solid #ddd;
                margin-left: 22vw;
                margin-top: -10vw;
            }
            .aftertime{
                margin-top: -8vw;
                // margin-left: 2vw;
                margin-left: 50vw;
                .time{
                    font-size: 20px;
                    font-weight: 500;
                }
                .start{
                    font-size: 13px;
                    color: #808080;
                }
            }
            .price{
                // float: right;
                // margin-right: 3vw;
                margin-left: 70vw;
                margin-top: -7vw;
                font-size: 25px;
                color: red;
            }
            .text{
                margin-left: 2vw;
                margin-top: -1vw;
                font-size: 13px;
                color: #808080;
            }
        }
    }
}
</style>